<template>
  <div class="">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="content">
      <div class="left">
        <div v-for="(item, index) in goodsData" :key="index">
          {{ item.val }}
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in goodsData" :key="index">
          <h3>{{ item.val }}</h3>
          <div class="rightBox">
            <div
              @click="toDetailPag(value)"
              class="card"
              v-for="(value, key) in item.child"
              :key="key"
            >
              <img :src="value.pic" alt="" />
              <div class="handle">
                <div>
                  <p>{{ value.name }}</p>
                  <p>月销{{ value.sold }}</p>
                </div>

                <div class="handlesub">
                  <p class="red">${{ value.price }}</p>
                  <div class="sumBox">
                    <transition
                      appear
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__bounceInRight"
                      leave-active-class="animate__bounceOutRight"
                    >
                      <div v-if="value.num > 0" class="subAnimation">
                        <div @click.stop="subGoods(value, index)" class="sub">
                          -
                        </div>
                        <span>{{ value.num }}</span>
                      </div>
                    </transition>

                    <div v-if="value.num <= 0" class="block">
                      <!-- 站位div -->
                    </div>
                    <div class="add" @click.stop="addGoods(value, index)">
                      +
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="call">
        练习
      </div>
      <article @click="show = true">
        <img src="../assets/美团.png" alt="" />
        <b>{{ subTotal }}</b>
        <span> 总价格{{ parseFloat(totalNum) }}</span>
      </article>
      <div class="close">
        去结算
      </div>
    </footer>
    <!-- 对话框 -->
    <Dialog :show.sync="show" height="70" mask>
      <template>
        <header>
          <p>购物车（共{{ localGoodsData.length }} 件商品）</p>
          <p @click="$store.commit('clear')">全部清除</p>
        </header>
        <div class="list">
          <div class="card" v-for="(value, key) in localGoodsData" :key="key">
            <img :src="value.pic" alt="" />
            <div>
              <p>{{ value.name }}</p>
              <p class="red">￥ {{ value.price * value.num }}</p>
              <van-stepper @change="$emit('changeNum')" v-model="value.num" />
            </div>
          </div>
        </div>
        <button></button>
      </template>
    </Dialog>
  </div>
</template>

<script>
import axios from "axios";
import Dialog from "../components/dialog.vue";
import { mapState, mapGetters } from "vuex";
import "animate.css";
export default {
  data() {
    return {
      value: "",
      goodsData: [],
      show: false,
    };
  },
  mounted() {
    axios.get("tapList.json").then((res) => {
      this.goodsData = res.data.data;
      console.log(this.goodsData);
    });
  },
  methods: {
    // 增加商品
    addGoods(value, index) {
      this.goodsData[index].child.forEach((element) => {
        if (element.id == value.id) {
          if (element.num <= 0) {
            element.num++;
          }
        }
      });
      this.$store.commit("addGoods", value);
    },
    // 减少商品
    subGoods(value, index) {
      // this.goodsData[index].child.forEach((element) => {
      //   if (element.id == value.id) {
      //     element.num <= 0 ? 0 : element.num--;
      //     if (element.num <= 0) {
      //       this.$store.commit("remove", value.id);
      //     }
      //   }
      // });
      this.$store.commit("subGoods", value);
    },
    // 去详情
    toDetailPag(val) {
      this.$router.push({ path: "/detail", query: { id: val.id } });
    },
  },
  watch: {
    goodsData: {
      handler(val) {},
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapState(["localGoodsData"]),
    ...mapGetters(["totalNum", "subTotal"]),
  },
  components: { Dialog },
};
</script>

<style lang="scss">
.handle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  .handlesub {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}
.red {
  color: red;
}
.list {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  .card {
    width: 100%;
    height: 90px;
    display: flex;
    border-bottom: 1px solid #000;
    img {
      width: 40%;
      height: 100%;
    }
  }
}

footer {
  width: 85%;
  height: 55px;
  background-color: rgb(71, 68, 68);
  position: fixed;
  border-radius: 70px;
  bottom: 10px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  .call,
  article,
  .close {
    height: 100%;
    text-align: center;
    line-height: 55px;
  }
  .call {
    width: 25%;
  }
  article {
    width: 50%;
    display: flex;
    align-items: center;
    position: relative;
    img {
      width: 40%;
      height: 100%;
    }
    b {
      display: inline-block;
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 100%;
      line-height: 20px;
      text-align: center;
      left: 37px;
      top: 16px;
      color: #fff;
    }
  }

  .close {
    width: 25%;
    background-color: #fcc444;
    border-radius: 0 35px 35px 0;
  }
}
.sumBox {
  display: flex;
  width: 50%;
  justify-content: space-around;
  align-items: center;
  .subAnimation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 60%;
  }
  .block {
    width: 60%;
  }
}
.content {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;

  .left {
    width: 20vw;
    height: 90vh;
    border-right: 1px solid #000;
    overflow: scroll;
    div {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #000;
    }
  }
  .right {
    width: 80vw;
    height: 90vh;
    overflow: scroll;
    .add {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      border-radius: 50%;
      background-color: rgb(231, 235, 27);
    }
    .sub {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      border-radius: 50%;
      border: 1px solid rgb(109, 106, 106);
    }
    h3 {
      width: 100%;
      height: 80px;
      line-height: 20px;
    }
    .rightBox {
      width: 100%;
      display: flex;
      flex-direction: column;
      .card {
        width: 100%;
        height: 140px;
        border: 1px solid #000;
        display: flex;
        margin: 5px 0;
        font-size: 0.9rem;
        padding-right: 8px;
        img {
          width: 40%;
          height: 100%;
          margin-right: 8px;
        }
      }
    }
  }
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  width: 100%;
}
</style>
